<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i>运单温度详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div v-for="(item,index) in temp" :key="index">
            时间: {{item.timenow}}  温度:{{item.temp}} C
        </div>           
        <el-button size="small" type="success" @click="port">导出为excel表格</el-button>
        <el-container>
                
            <el-main>
                <!--为echarts准备一个具备大小的容器dom-->
                <div id="main" style="width: 300px;height: 200px;"></div>
            </el-main>
        </el-container>
        
        
    </div>
    
</template>
<script>
    import { ShowOneSign } from '../../api/api.js'
    import echarts from 'echarts'
    export default {
        name: '',
        data() {
            return {
                sign:{},
                temp:[],
                charts: '',
                opinionData: [],
                data:[]
            }
        },
        methods: {
            drawLine(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['安全温度图']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
 
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.data
                    
                    },
                    yAxis: {
                        type: 'value'
                    },
 
                    series: [{
                        name: '安全温度图',
                        type: 'line',
                        stack: '总量',
                        data: this.opinionData
                    }]
                })
            },
            export2Excel(){
                require.ensure([],()=>{
                    const {export_json_to_excel } = require('../../lib/Export2Excel.js')  //刚刚新建Export2Excel.js文件的路径
                    const tHeader = ['生成时间','温度']   //自定义列名
                    const filterVal = ['timenow','temp']   //对应自段
                    const list = this.temp   //table数据
                    const data = this.formatJson(filterVal,list);
                    export_json_to_excel(tHeader,data,'列表excel');  //导出文件名称
                })
                },
            formatJson(filterVal,jsonData){
                console.info(jsonData)
                return jsonData.map(v => filterVal.map(j=> v[j]))
            },
            port(){
                this.export2Excel()
            },
        },
        //调用
        mounted() {
            let params = {
                id:this.$route.query.id
            }
            ShowOneSign(params).then(res=>{
                this.temp = res.data.temp
                this.sign = res.data.sign
                for(let i=0;i<this.temp.length;i++){
                    this.data.push(this.temp[i].timenow)
                    this.opinionData.push(this.temp[i].temp.toString())
                }
                this.$nextTick(function() {
                    this.drawLine('main')
                })
            })
            
        }
    }
</script>
<style scoped>
    /* * {
        margin: 0;
        padding: 0;
        list-style: none;
    } */
</style>